import React, { useEffect, useState } from 'react';
import { Tabs, Dropdown } from 'antd';
import { connect } from 'dva';
import { history } from 'umi';
import Summary from '../reportPage/TabComponents/testSummary/index';
import Environment from '../reportPage/TabComponents/testEnvironments/index';
import Performance from '../reportPage/TabComponents/testPerformance/index';
import OverLoadPage from '../reportPage/TabComponents/testOverLoad/index';
import PowerConsumptio from '../reportPage/TabComponents/powerConsumptio/index';
import HotPage from '../reportPage/TabComponents/hotPage/index';
import styles from './index.less';
import { queryBaseInfo, queryDownLoadUrl } from '../../../../api/gameTaskInfo';

const items = [
  {
    label: <a href="https://www.antgroup.com">原始数据包</a>,
    key: '0',
  },
  {
    label: <a href="https://www.aliyun.com">复制链接</a>,
    key: '1',
  },
];

const OperationsSlot = {
  right: (
    <div style={{ marginLeft: 32 }}>
      <Dropdown
        menu={{
          items,
        }}
        trigger={['click']}
      >
        <span onClick={(e) => e.preventDefault()}>下载</span>
      </Dropdown>
      {/* <span>11111111</span> */}
    </div>
  ),
};
const reportPage = (props) => {
  const [downLoadUrl, setdownLoadUrl] = useState(String);

  // 基本信息列表
  const [baseinfo, setbaseinfo] = useState([]);

  useEffect(() => {
    const { jobId } = history.location.state || {};
    console.log('jobid:', jobId);
    const fetchData = async (id) => {
      try {
        const resp = await queryBaseInfo({
          jobId: id,
        });
        console.log('任务列表' + JSON.stringify(resp.data));
        console.log('任务列表 deviceNum: ' + resp.data.data.deviceNum);
        console.log('任务信息--' + resp.data.data);
        setbaseinfo(resp.data.data);
        getDownLoadUrl(id, resp.data.data.deviceNum);
      } catch (err) {
        console.log('queryBaseInfo err', err);
      }
    };
    fetchData(jobId);
  }, []);

  // 获取下载地址
  const getDownLoadUrl = async (id, deviceNum) => {
    try {
      const resp = await queryDownLoadUrl({
        jobId: id,
        deviceNum: deviceNum,
      });
      console.log('下载地址: ' + JSON.stringify(resp.data.data));
      setdownLoadUrl(resp.data.data);
    } catch (err) {
      console.log('queryDownLoadUrl err', err);
    }
  };

  const onChange = (key) => {
    console.log(key);
  };
  // 基础信息接口接收变量
  const [basicInformation, setBasicInformation] = useState([]);
  const back = () => {
    history.go(-1);
  };
  const items = [
    {
      key: '1',
      label: '测试概述',
      children: <Summary />,
    },
    {
      key: '2',
      label: '性能',
      children: <Performance />,
    },
    {
      key: '3',
      label: '负载',
      children: <OverLoadPage />,
    },
    {
      key: '5',
      label: '功耗',
      children: <PowerConsumptio />,
    },
    {
      key: '6',
      label: '热',
      children: <HotPage />,
    },
    {
      key: '7',
      label: '测试环境',
      children: <Environment />,
    },
    // {
    //   key: '8',
    //   label: '下载',
    //   children: 'Content of Tab Pane 3',
    // },
  ];

  const items1 = [
    {
      key: '1',
      label: `测试概述`,
      children: `Content of Tab Pane 1`,
    },
    {
      key: '2',
      label: `性能`,
      children: <Performance />,
    },
    {
      key: '3',
      label: `负载`,
      children: `Content of Tab Pane 3`,
    },
    {
      key: '4',
      label: '性能',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '5',
      label: '功耗',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '6',
      label: '热',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '7',
      label: '测试环境',
      chidren: <Environment />,
    },
  ];
  return (
    <div className={styles.reportContainer}>
      <div className={styles.pageTitle} onClick={() => back()}>
        <div className={styles.page_picture}></div>
        <div className={styles.heade_cont}>图形图像测试报告</div>
      </div>
      <div className={styles.messageCard}>
        <div className={styles.baseInfo}>基本信息</div>
        <div className={styles.smallTable}>
          <div className={styles.tableColumn}>
            <div className={styles.column_title}>任务名称</div>
            <div className={styles.column_content}>{baseinfo.taskName}</div>
          </div>
          <div className={styles.tableColumn}>
            <div className={styles.column_title}>服务类型</div>
            <div className={styles.column_content}>游戏评测</div>
          </div>
          <div className={styles.tableColumn}>
            <div className={styles.column_title}>开始时间</div>
            <div className={styles.column_content}>{baseinfo.startTime}</div>
          </div>
          <div className={styles.tableColumn}>
            <div className={styles.column_title}>结束时间</div>
            <div className={styles.column_content}>{baseinfo.endTime}</div>
          </div>
          <div className={styles.tableColumn}>
            <div className={styles.column_title}>持续时间</div>
            <div className={styles.column_content}>
              {baseinfo.endTime - baseinfo.startTime}
            </div>
          </div>
          <div className={styles.tableColumn}>
            <div className={styles.column_title}>测试有效时长</div>
            <div className={styles.column_content}>{baseinfo.validTime}</div>
          </div>
        </div>
      </div>
      <div className={styles.tabDiv}>
        {/* <Tabs
          defaultActiveKey="1"
          tabBarExtraContent={OperationsSlot}
          items={items}
          onChange={onChange} /> */}
        <Tabs
          defaultActiveKey="1"
          tabBarExtraContent={OperationsSlot}
          items={items}
          onChange={onChange}
        />
      </div>
    </div>
  );
};
export default reportPage;

// export default connect(({ staticKpiPage }) => ({ staticKpiPage }))(
//   reportPage,
// );
